<!--  -->
<template>
  <div class="content">
    <van-nav-bar title="搜索" />

    <van-tabs v-model="active" line-width="50%" title-active-color="#E75C61">
      <van-tab title="二手房">
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          class="searchbar"
        />
        <div class="search-history">
          <span>搜索订阅：</span>
          <div class="right-history">
            东城，200万以下，三室，朝西，150-200
            <van-icon name="arrow" size="10" class="icon-right" />
          </div>
        </div>
        <div class="price">总价（万）</div>
        <div class="price-count">{{ value }}万</div>

        <van-slider
          v-model="value"
          bar-height="2px"
          active-color="#ee0a24"
          :min="0.8"
          :max="3"
          :step="0.1"
          class="sliderin"
        />
        <van-divider class="divider-mid"></van-divider>
        <div class="checkboxStyle">
          <div class="title-menu">选择房型</div>
          <input
            type="checkbox"
            id="checkbox1"
            value="1"
            v-model="checkedValue"
          />
          <label for="checkbox1">一室</label>
          <input
            type="checkbox"
            id="checkbox2"
            value="2"
            v-model="checkedValue"
          />
          <label for="checkbox2">二室</label>
          <input
            type="checkbox"
            id="checkbox3"
            value="3"
            v-model="checkedValue"
          />
          <label for="checkbox3">三室</label>
          <input
            type="checkbox"
            id="checkbox4"
            value="4"
            v-model="checkedValue"
          />
          <label for="checkbox4">四室</label>
          <input
            type="checkbox"
            id="checkbox5"
            value="5"
            v-model="checkedValue"
          />
          <label for="checkbox5">五室</label>
          <input
            type="checkbox"
            id="checkbox6"
            value="6"
            v-model="checkedValue"
          />
          <label for="checkbox6">五室以上</label>
        </div>
        <van-divider class="divider-mid"></van-divider>

        <div class="checkboxStyle">
          <div class="title-menu">标签</div>
          <input
            type="checkbox"
            id="checkbox7"
            value="7"
            v-model="checkedValue"
          />
          <label for="checkbox7">满五年</label>
          <input
            type="checkbox"
            id="checkbox8"
            value="8"
            v-model="checkedValue"
          />
          <label for="checkbox8">满两年</label>
          <input
            type="checkbox"
            id="checkbox9"
            value="9"
            v-model="checkedValue"
          />
          <label for="checkbox9">近地铁</label>
          <input
            type="checkbox"
            id="checkbox10"
            value="10"
            v-model="checkedValue"
          />
          <label for="checkbox10">新上</label>
          <input
            type="checkbox"
            id="checkbox11"
            value="11"
            v-model="checkedValue"
          />
          <label for="checkbox11">随时看房</label>
          <input
            type="checkbox"
            id="checkbox12"
            value="12"
            v-model="checkedValue"
          />
          <label for="checkbox12">不看商业类</label>
        </div>
        <van-divider class="divider-mid"></van-divider>

                <div class="checkboxStyle">
          <div class="title-menu">朝向</div>
          <input
            type="checkbox"
            id="checkbox13"
            value="13"
            v-model="checkedValue"
          />
          <label for="checkbox13">朝东</label>
          <input
            type="checkbox"
            id="checkbox14"
            value="14"
            v-model="checkedValue"
          />
          <label for="checkbox14">朝南</label>
          <input
            type="checkbox"
            id="checkbox15"
            value="15"
            v-model="checkedValue"
          />
          <label for="checkbox15">朝西</label>
          <input
            type="checkbox"
            id="checkbox16"
            value="16"
            v-model="checkedValue"
          />
          <label for="checkbox16">朝北</label>
          <input
            type="checkbox"
            id="checkbox17"
            value="17"
            v-model="checkedValue"
          />
          <label for="checkbox17">南北通透</label>
          <input
            type="checkbox"
            id="checkbox18"
            value="18"
            v-model="checkedValue"
          />
          <label for="checkbox18">东西通透</label>
        </div>
    <div class="button-login" @click="showPopup">开始找房</div>

      </van-tab>
      <van-tab title="租房" class="zufang">
        <div class="box">
          <div class="front">
            <img
              class="round"
              src="https://tse1-mm.cn.bing.net/th/id/R-C.183c6a22c892c2ede7e4e447130c0aa3?rik=G%2b%2fzXrVtUljcrQ&riu=http%3a%2f%2fpic27.nipic.com%2f20130309%2f8569866_221155188315_2.jpg&ehk=OB9ra%2bADuADbQJlQnt%2bdYLncknvmT5b56mZZUcOjSMQ%3d&risl=&pid=ImgRaw&r=0"
              alt=""
            />
          </div>
          <div class="back">
            <img
              class="round"
              src="https://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=fdcf397a3c4e251fe2a2ecfe97b6e52f/caef76094b36acaf92260dbc70d98d1000e99ca8.jpg"
              alt=""
            />
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      value: 2,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
.van-tabs__line {
  width: 200px !important;
  height: 10px;
}
.content {
  padding: 20px;
}
.sliderin {
  width: 100%;
}
.searchbar {
  padding: 20px 0;
}
.search-history {
  display: flex;
  height: 30px;
  font-size: 13px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #666666;
  line-height: 30px;
}
.right-history {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f4f4f4;
  border-radius: 5px;
  padding-left: 8px;
  padding-right: 3px;
}
.icon-right {
  padding-left: 2px;
}
.price {
  font-size: 17px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #333333;
  line-height: 17px;
  margin-top: 25px;
}
.price-count {
  margin: 17px 0;
  text-align: center;
  font-size: 15px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #666666;
  line-height: 15px;
}
.divider-mid {
  padding: 20px 0;
}
.checkboxStyle {
  background: white;
  padding-bottom: 10px;
  display: table-footer-group;
  /* margin-top: 49px;
    padding-top: 30px; */
}
.checkboxStyle input {
  line-height: 30px;
  height: 30px;
  border-radius: 2px;
  display: none;
}
.checkboxStyle label {
  line-height: 30px;
  height: 30px;
  font-size: 12px;
  padding: 0 20px;
  color: #333;
  float: left;
  border-radius: 2px;
  margin: 10px 10px 10px 0;
  text-align: center;
  background: #f1f1f1;
}
.checkboxStyle input:checked + label {
  background-color: #E75C61;
  color: white;
}
.title-menu {
  height: 14px;
  font-size: 15px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #333333;
  line-height: 15px;
  margin-bottom: 10px;
}

@keyframes shake-around {
  0% {
    width: 100px;
    height: 100px;
  }

  17% {
    /* clear: both; */
    margin: 100px 20vw;
    width: 60vw;
    height: 60vw;
    /* height: 100%; */
    /* margin: 100px auto; */
  }
  50% {
    /* margin: 100px 20vw;
                width: 60vw;
                height: 60vw; */

    transform: rotateY(360deg);
  }

  60% {
    transform: rotateY(405deg);
  }

  80% {
    transform: rotateY(315deg);
  }

  90% {
    transform: rotateY(405deg);
  }

  100% {
    transform: rotateY(360deg);
    /* width: 300px;
                height: 300px;
                margin: 100px auto; */
    margin: 100px 20vw;
    width: 60vw;
    height: 60vw;
  }
}

.box {
  position: relative;
  width: 100px;
  height: 100px;
  margin-left: 0;
  margin-top: 0;
  /* transition: all 8s; */
  /* 让背面的紫色盒子保留立体空间 给父级添加的 */
  transform-style: preserve-3d;
  text-align: center;
}

.box:hover {
  /* animation: shake-around 10s infinite; */
  /* transform: rotateY(540deg); */
  animation: shake-around 3s forwards infinite ease-in;
}

.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* font-size: 30px;
            text-align: center;
            line-height: 300px; */
}

.front {
  /* background-size: 300px 300px; */

  /* background-image: url(https://tse1-mm.cn.bing.net/th/id/R-C.dd87870885ac22f313500f50d970dcee?rik=BaIWm4Gs1%2fNSTg&riu=http%3a%2f%2fpic101.nipic.com%2ffile%2f20160618%2f20928798_134501191002_2.jpg&ehk=WHtnwt9VUZiBskTTq5OsYsCDz7QSZc63EGncDpbnAwg%3d&risl=&pid=ImgRaw&r=0); */
  /* background-image: url(https://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=fdcf397a3c4e251fe2a2ecfe97b6e52f/caef76094b36acaf92260dbc70d98d1000e99ca8.jpg); */

  z-index: 1;
  backface-visibility: hidden;
}

.back {
  /* background-size: 300px 300px; */
  background-color: yellow;

  /* background-image: url(https://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=fdcf397a3c4e251fe2a2ecfe97b6e52f/caef76094b36acaf92260dbc70d98d1000e99ca8.jpg); */
  /* 像手机一样 背靠背 旋转 */
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

.round {
  box-shadow: 0 0 20px 20px tomato;
  border-radius: 50%;
  margin-top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 100%;
}
.zufang {
  perspective: 980px;
}
.divider-bottom {
  width: 100%;
  height: 1px;
  background: #e1e1e1;
}
.button-login {
  font-size: 16px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 44px;
  height: 44px;
  background: #e75c61;
  border-radius: 22px;
  text-align: center;
  margin: 10px 108px;
}

</style>
